/**
 * 三级联动
 */

import { useAppDispatch } from "@/hooks";
import { getCategoryList1, getCategoryList2, getCategoryList3 } from "@/store/slices/category";
import { Card, Form, Select } from "antd";
import { format } from "path";
import { useEffect } from "react";
import { useSelector } from "react-redux";

function Index() {
    const [form] = Form.useForm()
    const dispatch = useAppDispatch()
    // 保存一级分类列表
    const { categoryList1, categoryList2, categoryList3 } = useSelector((state: any) => state.category)
    // console.log(categoryList1)
    useEffect(() => {
        dispatch(getCategoryList1())
    }, [])

    // 获取二级分类列表
    function get2List(value: number) {
        dispatch(getCategoryList2(value) as any)
    }

    // 获取三级分类列表
    function get3List(value: number) {
        dispatch(getCategoryList3(value) as any)
    }

    return (
        <div id={"content"}>
            <Card>
                <Form
                    form={form}
                    layout="inline"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 14 }}
                // initialValues={{ size: componentSize }}
                // onValuesChange={onFormLayoutChange}
                // size={componentSize as SizeType}
                >
                    <Form.Item label="一级分类" >
                        <Select style={{ width: 200, margin: '0 20px' }} placeholder="请选择" onChange={(value) => {
                            get2List(value)
                            form.resetFields(['categoryList2', 'categoryList3'])
                        }}>
                            {
                                categoryList1.map((item: any) => (
                                    <Select.Option key={item.id}>{item.name}</Select.Option>
                                ))

                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="二级分类" name="categoryList2">
                        <Select style={{ width: 200, margin: '0 20px' }} placeholder="请选择" onChange={(value) => {
                            get3List(value)
                            form.resetFields(['categoryList3'])
                        }}>
                            {
                                categoryList2.map((item: any) => (
                                    <Select.Option key={item.id}>{item.name}</Select.Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="三级分类" name="categoryList3">
                        <Select style={{ width: 200, margin: '0 20px' }} placeholder="请选择">
                            {
                                categoryList3.map((item: any) => (
                                    <Select.Option key={item.id}>{item.name}</Select.Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Index;